<template>
  <ContainerGroup
    class="dept-container"
    style="flex-direction: row; box-sizing: border-box; overflow: hidden"
  >

    <!-- 列表区域开始 -->
    <Container
      class="query-box"
      style="padding: 0; background: #f0f2f5"
      :height="height"
    >
      <Container
        class="rule-detail"
        style="height: calc(100% - 1px); overflow: hidden"
      >
        <!-- 功能按钮 -->
        <!-- <div class="button-bar">
          <Button icon="add" @click="addDetail">新增</Button>
        </div> -->
        <!-- 列表 -->
        <div class="table-box">
          <el-table
            v-loading="loading"
            height="calc(100% - 20px)"
            :data="tableData"
            default-expand-all
            border
            :tree-props="treeProps"
            :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8' }"
            highlight-current-row
          >
            <el-table-column align="center" type="index" />
            <el-table-column label="科室编码" prop="deptCode">
              <!-- <template slot-scope="scope">
            <div class="text-btn" @click="handleDept(scope.row)">
              {{
                scope.row.deptCode === "AAAAAAAAAA"
                  ? "9999"
                  : scope.row.deptCode
              }}
            </div>
          </template> -->
            </el-table-column>
            <el-table-column prop="deptName" label="名称" width="300">
              <template slot-scope="scope">
                <h3 v-if="scope.row.isParent">{{ scope.row.deptName }}</h3>
                <div v-else>{{ scope.row.deptName }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="deptName" label="名称" width="300" /> -->
            <el-table-column
              align="center"
              prop="clinicalPropertyName"
              label="临床属性"
            />
            <el-table-column
              align="center"
              prop="deptTypeName"
              label="核算单元"
            />
            <el-table-column
              align="center"
              prop="deptPropertyName"
              label="科室属性"
            />
            <!-- <el-table-column align="center" label="操作" width="120">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <i
                    class="el-icon-edit-outline"
                    style="
                    padding-top: 4px;
                    font-size: 20px;
                    color: #207efa;
                    cursor: pointer;
                  "
                    @click="editDetail(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                  style="margin-left: 10px"
                >
                  <i
                    class="el-icon-delete"
                    style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                    @click="handleDel(scope.row)"
                  />
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </Container>

    </Container>
    <!-- 列表区域结束 -->
  </ContainerGroup>
</template>

<script>
import { getDepartmentSourceWithPerformance } from '../../../utils/apis/performance/index.js'

export default {
  name: 'KeShiDictionary', // 科室字典查询
  components: { },
  data() {
    return {
      jie: true,
      loading: false,
      deptDisabled: false,
      // 分页参数
      // pageAttr: {
      //   pageSize: 20,
      //   currentPage: 1,
      //   total: 0
      // },
      // container高度
      height: 'fill',
      // 科室类型表单
      deptType: [],
      isEdit: false,
      treeProps: {
        children: 'childrens'
      },
      // 规则详情表单
      tableData: [],
      showEidtVlidate: false,
      drawerTitle: '',
      // 新增或编辑表单
      form: {
        id: '',
        deptCode: '',
        deptName: '',
        clinicalPropertyId: '', // 属性
        deptPropertyId: '', // 科室属性
        deptTypeId: '', // 科室类型
        projectId: '',
        parentCode: false,
        isCurrAccount: '',
        isLeaf: false
      },
      clinicalPropertyList: [],
      deptTypeList: [],
      deptPropertyList: [],
      newParamList: {}
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  methods: {
    getData() {
      this.loading = true
      getDepartmentSourceWithPerformance().then((res) => {
        this.loading = false
        if (res.data.code === 200) {
          this.tableData = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table .warning-row {
    background-color: #fef0f0;
    color: #f56c6c;
  }
.query-box {
  flex: 1;
}
.dept-type {
  padding: 0 !important;
  flex: 0 0 240px;
  margin-right: 10px;
}
.rule-detail {
  padding: 0 !important;
  flex: 1;
}
.title {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background-color: #fefefe;
  // border-bottom: 1px solid #ccc;
}
.edit-detail {
  color: #4073ff;
  cursor: pointer;
}
.button-bar {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 12px;
  Button:first-of-type {
    margin-right: 12px;
  }
}
.is-child {
  display: inline-block;
  padding-left: 12px;
}
.not-child {
  font-weight: bold;
}
.table-box {
  box-sizing: border-box;
  padding: 12px;
  height: calc(100% - 1px);
  overflow: hidden;
  // padding-top: 0;
}
/deep/ .dept-type .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #217dfa;
  color: #fff;
}
/deep/ .el-table__body tr.current-row > td {
  background-color: #217dfa;
  color: #fff;
}
</style>
